import { useEffect, useRef } from "react";
//css module
import styles from "./index.module.less";
import { Button, Checkbox, Flex, Form, Input } from "antd/lib";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { login } from "./api";

export default function Login() {
  const isInitRef = useRef(false);
  const [form] = Form.useForm();


  useEffect(() => {
    if (isInitRef.current) {
      return;
    }
    isInitRef.current = true;
  });

  const onFinish = (values: unknown) => {
    console.log("Received values of form: ", values);
    try {
      login();
    } catch (error) {
      console.log(error);
    }
    
  };

  return (
    <div className={styles.login}>
      <div className={styles.title}>图书管理系统</div>
      <div className={styles.loginWrapper}>
        <Form
          form={form}
          name="login"
          initialValues={{ remember: true }}
          style={{ width: 360 }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "Please input your Username!" }]}
          >
            <Input
              allowClear
              size="large"
              maxLength={11}
              prefix={<UserOutlined />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input.Password
              size="large"
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <a href="">忘记密码</a>
            </Flex>
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
